<template>
	<view>
		<view class="cu-list menu">
			<view class="cu-item divadd1">
				<view style="width: 25%;display: flex;align-items: center;justify-content: center;">
				</view>
				<view style="width: 50%;display: flex;align-items: center;justify-content: center;">
					<text style="font-size: 20px;">活动空间</text>
				</view>
				<view style="width: 25%;display: flex;align-items: center;justify-content: flex-end;">
					<button plain="true" class="carbtn1" @tap="gunli" v-show="toguanli">管理</button>
					<button plain="true" class="carbtn1" @tap="wancheng" v-show="towancheng">完成</button>
				</view>
			</view>
		</view>
		
		<!-- <view class="divadd">
			<image style="width: 80px;height: 85px;" src="../../static/hua.png"></image>
			<view style="font-size: 25px;">
				感谢支持！
			</view>
			<view style="font-size: 25px;">
				尽快上线！
			</view>
		</view> -->
		
		
		<checkbox-group class="block" @change="CheckboxChange">
			<view class="cu-form-group margin-top" style="justify-content: flex-start;" v-for="(item,index) in carzoneList" :key="index">
				<checkbox class='round blue' 
				:class="carzoneList[index].checked?'checked':''" 
				:checked="carzoneList[index].checked?true:false"
				:value="item.value"></checkbox>
				<view style="display: flex;padding-left: 5px;">
					<image mode="aspectFill" class="img" :src="item.ai[0].url"></image>
					<view style="
					display: flex;
					flex-direction: column;
					justify-content: center;
					width: 150px;
					padding-left: 5px;
					">
						<view style="height: 30px;">名称：{{item.activityName}}</view>
						<view style="height: 30px;">参与情况：{{item.tookNumber}}/{{item.limitNumber}}</view>
					</view>
				</view>
			</view>
		</checkbox-group>
		
		<view class="cu-list menu footer1">
			<view class="cu-item divadd1">
				<view class="divadd2">
					<checkbox-group class="block" @change="CheckboxChange1">
						<view class="cu-form-group">
							<checkbox style="transform:scale(0.6)" class='round blue' :class="checkbox1[0].checked?'checked':''" :checked="checkbox1[0].checked?true:false"
								 value="D">
							</checkbox>
							<view class="title" style="font-size: 14px;">已选({{num}})</view>
						</view>
					</checkbox-group>
				</view>
				<view class="divadd3">
				</view>
				<view class="divadd4">
					<button plain="true" class="carbtn2" v-show="toguanli" @tap="join">立即参与</button>
					<button plain="true" class="carbtn2" v-show="towancheng" @tap="shanchu">删除</button>
				</view>
			</view>
		</view>
	</view>
		
</template>

<script>
	export default {
		data() {
			return {
				Authorization:'',
				menuBorder:false,
				menuCard:false,
				carzone:[],
				carzoneList:[],
				valueList:[],
				checkbox: [{
					value: 'A',
					checked: false
				}, {
					value: 'B',
					checked: false
				}, {
					value: 'C',
					checked: false
				}, {
					value: 'D',
					checked: false
				}],
				checkbox1: [{
					value: 'D',
					checked: false
				}],
				toguanli: true,
				towancheng: false
			};
		},
		methods: {
			CheckboxChange(e) {
				var items = this.carzoneList,
					values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					items[i].checked = false;
					for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
						if (items[i].value == values[j]) {
							items[i].checked = true;
							break
						}
					}
				}
			},
			CheckboxChange1(e) {
				if(e.detail.value[0] == 'D'){
					for(let i = 0;i<this.carzoneList.length;i++){
						this.carzoneList[i].checked = true
					}
					this.checkbox1[0].checked = true
				}else if(e.detail.value == ''){
					for(let i = 0;i<this.carzoneList.length;i++){
						this.carzoneList[i].checked = false
					}
					this.checkbox1[0].checked = false
				}
			},
			gunli() {
				this.toguanli = false
				this.towancheng = true
			},
			wancheng() {
				this.towancheng = false
				this.toguanli = true
			},
			shanchu() {
				if(this.valueList.length == 0) {
					uni.showToast({
						icon: 'none',
					    title: '请选择一个活动',
					    duration: 1000
					});
				}else{
					for(let i = 0;i<this.valueList.length;i++){
						window.localStorage.setItem('空间'+this.valueList[i], JSON.stringify(false))
					}
					uni.showToast({
					    title: '删除成功~',
					    duration: 600
					});
					setTimeout(function() {
						location.reload()
					},1000)
				}
			},
			join() {
				if(this.Authorization == ''){
					uni.showToast({
						icon: 'none',
						title: '请先登录~',
						duration: 1000
					});
				}else{
					if(this.valueList.length == 0) {
						uni.showToast({
							icon: 'none',
							title: '请选择一个活动',
							duration: 1000
						});
					}else{
						for(let i = 0;i<this.valueList.length;i++){
							uni.request({
								url: 'http://101.37.15.60:8080/users/take', //仅为示例，并非真实接口地址。
								data: {
									activityId: this.valueList[i]
								},
								header: {
									'Authorization': 'Bearer '+this.Authorization
								},
								success: (res) => {
									window.localStorage.setItem('空间'+this.valueList[i], JSON.stringify(false))
									window.localStorage.setItem('参与'+this.valueList[i], JSON.stringify(true))
								}
							});
						}
						setTimeout(function() {
							uni.showToast({
								title: '参与成功~',
								duration: 500
							});
						},800)
						
						setTimeout(function() {
							location.reload()
						},1300)
					}
				}
			},
			getCookies() {
			  if (document.cookie.length > 0) {
			    var arr = document.cookie.split("; "); //这里显示的格式需要切割一下自己可输出看下
			    for (var i = 0; i < arr.length; i++) {
			      var arr2 = arr[i].split("="); //再次切割
			      //判断查找相对应的值
			      if (arr2[0] == "Authorization") {
			        this.Authorization = arr2[1]; //保存到保存数据的地方
			      }
			    }
			  }
			},
			getlocal() {
				this.carzone = []
				for (var i = 0; i < localStorage.length; i++) {
				    var key = localStorage.key(i); //获取本地存储的Key
					let name = key.substr(0, 2)
					let value = localStorage.getItem(key)
					if(name == '空间' && value == 'true') {
						this.carzone.push(key.substr(2))
					}
				    // console.log(localStorage.getItem(key));//所有value
				}
				for(let i = 0;i<this.carzone.length;i++) {
					uni.request({
					    url: 'http://101.37.15.60:8080/activity/selectById', //仅为示例，并非真实接口地址。
					    data: {
					        id: this.carzone[i]
					    },
					    success: (res) => {
							let list = res.data.data[0]
							list.checked = false
							list.value = this.carzone[i]
							this.carzoneList.push(list)
					    }
					});
				}
			}
		},
		mounted() {
			this.getlocal()
			this.getCookies()
		},
		computed:{
			num() {
				let arr = []
				for(let i = 0;i<this.carzoneList.length;i++) {
					if(this.carzoneList[i].checked == true){
						arr.push(this.carzoneList[i].value)
					}
				}
				let a =arr.length
				if(arr.length == this.carzoneList.length){
					this.checkbox1[0].checked = true
				}else{
					this.checkbox1[0].checked = false
				}
				this.valueList = arr
				return a
			}
		}
	}
</script>

<style>
	.divadd {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-top: 130px;
	}
	.footer1 {
		position: fixed;
		bottom: 50px;
		width: 100%;
		height: 50px;
		background-color: #FFFFFF;
	}
	.carbtn1{
		font-size: 16px;
		border: none;
	}
	.carbtn2{
		border: none;
		font-size: 14px;
		background-color: #e54d42;
		font-size: 16px;
		color: white;
	}
	.divadd1 {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.divadd2 {
		width: 40%;
		height: 35.2px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.divadd4 {
		width: 40%;
		height: 35.2px;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
	.divadd3{
		width: 20%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.img{
		width: 90px;
		height: 90px;
		border-radius: 45px;
		margin: 3px 0 3px 0;
	}
</style>
